useStorage

Sequence Connectクライアントのストレージインスタンスへアクセスするためのフック

インポート

import { useStorage, useStorageItem } from '@0xsequence/connect'

使い方

import { useStorage, signEthAuthProof, validateEthProof } from '@0xsequence/connect'
import { useWalletClient, usePublicClient } from 'wagmi'

function App() {
  const { data: walletClient } = useWalletClient()
  const publicClient = usePublicClient()
  const storage = useStorage()
  
  const generateEthAuthProof = async () => {
    if (!walletClient || !publicClient || !storage) {
      return
    }
    
    try {
      // Use storage to generate an auth proof
      const proof = await signEthAuthProof(walletClient, storage)
      console.log('proof:', proof)
      
      const isValid = await validateEthProof(walletClient, publicClient, proof)
      console.log('isValid?:', isValid)
    } catch (e) {
      console.error(e)
    }
  }
  
  return (
    <button onClick={generateEthAuthProof}>
      Generate EthAuth Proof
    </button>
  )
}

返り値の型

Storage<StorageItem> | null

ストレージインスタンスが利用可能な場合はそれを、設定されていない場合はnullを返します。

useStorageItem

Sequence Connectのストレージから特定のアイテムを取得するためのフック。

使い方

import { useStorageItem } from '@0xsequence/connect'

function App() {
  const { data: authToken, isLoading } = useStorageItem('authToken')
  
  if (isLoading) {
    return <div>Loading...</div>
  }
  
  return (
    <div>
      {authToken ? 'Authenticated' : 'Not authenticated'}
    </div>
  )
}

パラメータ

パラメータ	型	説明
key	keyof StorageItem	取得したいストレージアイテムのキー

返り値の型

UseQueryResult<StorageItem[K]>

ストレージアイテムのデータを含むreact-queryの結果を返します。主なプロパティは以下の通りです：

プロパティ	型	説明
data	StorageItem[K]	取得されたストレージアイテムのデータ
isLoading	boolean	データが現在読み込み中かどうか
isError	boolean	データ取得時にエラーが発生したかどうか
error	Error	エラーが発生した場合のエラーオブジェクト
…	…	その他のreact-queryプロパティ

補足

これらのフックは、Sequence Connectが認証データやウォレットの状態、その他クライアント側のストレージ用途で利用するストレージレイヤーへのアクセスを提供します。useStorageフックは認証証明の生成などストレージレイヤーへの直接アクセスが必要な操作でよく使われ、useStorageItemはreact-queryと連携して特定のアイテムを簡単に取得できます。